<!-- 抗菌药使用率 -->
<template>
    <div id="usageRate"></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-liquidfill";
import { getUsageRate } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {};
    },
    mounted() {
        this.setEcharts();
    },
    methods: {
        //设置echarts
        setEcharts() {
            var arrayTemp = [
                {
                    value: 0,
                    name: "人民医院",
                },
                {
                    value: 0,
                    name: "二院",
                },
                {
                    value: 0,
                    name: "中医院",
                },
                {
                    value: 0,
                    name: "妇幼保健",
                },
                {
                    value: 0,
                    name: "乡镇卫生院",
                },
            ];
            const data = new Array(5).fill(0).map(() => Mock.Random.integer(10, 70));
            data.forEach((item, index) => {
                arrayTemp[index].value = parseInt(
                    // item.VALUE1.substring(0, item.VALUE1.length - 1) // 源数据应该是有一个 % 的字符，所以这里做了剪切
                    item
                );
            });
            let usageRate = echarts.init(document.getElementById("usageRate"));
            const ColorList = [
                "#389af4",
                "#ff8c37",
                "#ffc257",
                "#fd6f97",
                "#a181fc",
            ];
            var titleData = [];
            var series = [];
            var centerArr = [
                ["15%", "25%"],
                ["45%", "25%"],
                ["75%", "25%"],
                ["29%", "66%"],
                ["59%", "66%"],
            ];
            var textCenterArr = [
                ["14%", "42%"],
                ["44%", "42%"],
                ["74%", "42%"],
                ["27%", "86%"],
                ["58%", "86%"],
            ];
            arrayTemp.forEach((item, index) => {
                const color = ColorList[index];
                titleData.push({
                    text: item.name,
                    x: textCenterArr[index][0],
                    y: textCenterArr[index][1],
                    textAlign: "center",
                    textStyle: {
                        fontSize: "16",
                        color: color,
                        textAlign: "center",
                    },
                });
                series.push({
                    type: "liquidFill",
                    name: item.name,
                    radius: "30%",
                    center: centerArr[index],
                    //  shape: 'roundRect',
                    data: [
                        {
                            // NOTE 为了扩大鼠标悬浮热区 tooltip展示
                            value: 1,
                            itemStyle: {
                                color: "transparent",
                            },
                        },
                        item.value / 100,
                    ],
                    backgroundStyle: {
                        color: "transparent",
                    },
                    color: [color],
                    itemStyle: {
                        opacity: 0.6,
                    },
                    outline: {
                        borderDistance: 5,
                        itemStyle: {
                            borderWidth: 1,
                            borderColor: color,
                            shadowBlur: 10,
                            shadowColor: "#000",
                        },
                    },
                    label: {
                        position: ["50%", "50%"],
                        formatter: function () {
                            return `${item.value}%`;
                        },
                        fontSize: 18,
                        color: "#fff",
                    },
                });
            });
            let option = {
                title: titleData,
                series: series,
                tooltip: {
                    show: true,
                },
            };

            usageRate.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#usageRate {
    width: 100%;
    height: 100%;
}
</style>